<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2020/11/11
  Time: 10:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>房间类型</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
</head>
<body>
<div id="min" >
    <form class="layui-form" action="" id="adataform" lay-filter="ggg">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 10px">id</label>
            <div class="layui-input-inline">
                <input type="text"  name="id" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">房间类型</label>
            <div class="layui-input-inline">
                <input type="text"  name="name" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-input-inline">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo2">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="re">重置</button>
        </div>

    </form>
</div>





<div id="addGustForm">
    <form class="layui-form" action="" id="addform">
        <div class="layui-form-item">
            <label class="layui-form-label">房间类型 </label>
            <div class="layui-input-block">
                <input type="text"  name="name" required  lay-verify="required" placeholder="请输入房间类型" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间押金</label>
            <div class="layui-input-block">
                <input type="text" name="yj" required   placeholder="请输入押金" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间金额</label>
            <div class="layui-input-block">
                <input type="text" name="money" required   placeholder="请输入房间金额" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" >立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>



<div id="updGustForm">
    <form class="layui-form" action="" lay-filter="modify">
                <input type="hidden"  name="id" required  lay-verify="required" autocomplete="off" class="layui-input" disabled>
        <div class="layui-form-item">
            <label class="layui-form-label">房间类型</label>
            <div class="layui-input-block">
                <input type="text"  name="name" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间押金</label>
            <div class="layui-input-block">
                <input type="text" name="yj" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间金额</label>
            <div class="layui-input-block">
                <input type="text" name="money" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" >立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
    </form>
</div>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<%--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>
    {{# if(d.count>0) { }}
    <button  class="layui-btn layui-btn-disabled layui-btn-xs">操作</button>
    {{# }else{ }}
    <button lay-event="caozuo" class="layui-btn layui-btn-warm layui-btn-xs">操作</button>
    {{# } }}
</script>

<div id="caozuo" style="display: none">
    <input type="hidden" id="hid">
    <button id="one" class="layui-btn layui-btn-warm layui-btn-radius">停用</button>
    <button id="two" class="layui-btn layui-btn-danger layui-btn-radius" >恢复</button>
</div>

<table class="layui-hide" id="test" lay-filter="test" ></table>


<script>
     layui.use( ['table','layer','form' ], function(){
         var table = layui.table;
         var layer=layui.layer;
         var $=layui.jquery;
         var form=layui.form;
         $("#addGustForm").hide();
        $("#updGustForm").hide();

        table.render({
            elem: '#test' //id为test的table
            ,url:'${pageContext.request.contextPath}/queryAllType/que'   //url 查询数据   所有的客户的数据
           ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: []
            ,title: '客户数据表'
            //data[{ id:12,name:123}]
            ,cols: [[
                {field:'id', title:'ID',fixed: 'left',  sort: true}
                ,{field:'name', title:'房间类型'}
                ,{field:'yj', title:'房间押金',sort: true}
                ,{field:'money', title:'房间金额',  sort: true}
                ,{field:'count', title:'数量',  sort: true,hide:true}
                ,{field:'status', title:'状态',templet:function (data){
                        if (data.status==0){
                            return "正常";
                        }else {
                            return "已停用";
                        }
                    }}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]]
            ,page: true
            , done: function (res, curr, count) {
                var that = this.elem.next();
                res.data.forEach(function (item, index) {
                    if (item.status === 1) {
                        var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']");
                        tr.css("background-color", "gray");//目标单元格颜色
                        tr.css("color", "white");//被选中的单元格字体颜色 ：后勤部
                    }
                });
            }, parseData: function (res) {
                if (res.code == -1) {
                    layuiHelp.AlertMsg(res.msg, res.icon);
                }
            }

        });


         form.on('submit(demo2)',function (data){
             table.reload("test",{
                 page:{
                     curr:1
                 },where:data.field
             })
             return false;
         })
         $("#re").click(function (){
             location=location;
         })



        //监听行工具事件  test  表格的id
        table.on('tool(test)', function(obj){
            //obj 代表 一行的内容
            var data = obj.data; //一行的数据
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除了吗', function(index){
                $.ajax({
                    url: "${pageContext.request.contextPath}/queryAllType/delTypeId",
                    data:data,
                    success:function(r){
                        //弹出删除成功
                        layer.msg("删除成功！！！");
                        //刷新table
                        layer.close(index);
                        table.reload("test",{
                            page:{
                                //从第一页开始加载
                                curr:1
                            }
                        })
                    },error:function (r) {
                        alert(JSON.stringify(r))
                    }
                });
                layer.close(index);
                return false;
            });
            } else if(obj.event === 'edit'){
                form.val("modify",{
                    "id":data.id,
                    "name":data.name,
                    "yj":data.yj,
                    "money":data.money
                });
                layer.open({
                    title: '修改信息'
                    ,type:1
                    ,area: ['500px', '350px']
                    ,offset: '50px'
                    ,moveOut: true
                    ,content:$("#updGustForm")
                });
                form.on('submit(formDemo)', function(data){
                    //layer.msg(JSON.stringify(data.field));
                    //1.将获取到到的数据保存到数据库
                    $.ajax({
                        url:"${pageContext.request.contextPath}/queryAllType/updAndAdd",
                        data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                        type:"post",
                        success:function(t){
                            layer.closeAll();
                            //刷新一下table
                            table.reload('test',{
                                page:{
                                    curr:1
                                }
                            })
                        },error:function(msg){
                            alert("服务器错误")
                        }

                    })

                    return false;
                });
               /*  layer.prompt({
                formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });*/
            }else if (obj.event === 'caozuo') {
                /*confirmTrans: function(){*/
                //配置一个透明的询问框
                layer.msg('', {
                    content: $("#caozuo"),
                    closeBtn: 1,
                    time: 10000,
                    cancel: function () {
                        location = location;
                    },
                    success: function () {
                        $("#hid").val(data.id)
                    }
                });
            }


            $("#one").click(function (){
                var id=$("#hid").val();
                /* layer.closeAll();*/
                $.ajax({
                    url:"${pageContext.request.contextPath}/queryAllType/bad",
                    data:{id:id},
                    async:false,
                    success:function (d){
                        if (d>0){
                            layer.msg("已停用")
                        }
                    },error:function (){
                        alert(55)
                    }
                })
                setTimeout(function() {
                    window.location.reload();
                },400);
            })

            $("#two").click(function (){
                var id=$("#hid").val();
                /* layer.closeAll();*/
                $.ajax({
                    url:"${pageContext.request.contextPath}/queryAllType/good",
                    data:{id:id},
                    async:false,
                    success:function (d){
                        if (d>0){
                            layer.msg("已恢复");
                        }
                    },error:function (){
                        alert(66)
                    }
                })
                setTimeout(function() {
                    window.location.reload();
                },400);
            })



        });




        table.on('toolbar(test)', function(obj){
            layer.open({
                title: '添加房间的类型'
                ,type:1
                ,area: ['500px', '350px']
                ,offset: '50px'
                ,moveOut: true
                ,content:$("#addGustForm")
            });

            form.on('submit(formDemo)', function(data){
                //layer.msg(JSON.stringify(data.field));
                //1.将获取到到的数据保存到数据库
                $.ajax({
                    url:"${pageContext.request.contextPath}//queryAllType/updAndAdd",
                    data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                    type:"post",
                    success:function(t){
                        layer.closeAll();
                        //刷新一下table
                        table.reload('test',{
                            page:{
                                curr:1
                            }
                        })
                        $('#addform')[0].reset();
                        form.render();
                    },error:function(msg){
                        alert("服务器错误")
                    }
                })
                return false;
            });

        });


    });
</script>
</body>
</html>
